<script setup lang="ts">
import {ref, computed} from 'vue'
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios";
import {getCurrentUser} from "../service/user.ts";
import {Toast} from "vant";

const minDate = new Date();
const router = useRouter();

const showPicker = ref(false);
const initFormData = {
  "name": "",
  "description": "",
  "expireTime": null,
  "maxNum": 5,
  "password": "",
  "status": 0,
}
import dayjs from 'dayjs'

const addTeamData = ref({...initFormData})

// const displayedExpireTime = computed(() => {
//   if (!addTeamData.value.expireTime) return ''
//   const date = new Date(addTeamData.value.expireTime)
//   return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate()
//       .toString()
//       .padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date
//       .getMinutes()
//       .toString()
//       .padStart(2, '0')}`
// })

const formattedExpireTime = computed(() => {
  return addTeamData.value.expireTime
      ? dayjs(addTeamData.value.expireTime).format('YYYY-MM-DD HH:mm')
      : '点击选择过期时间'
})


// const onConfirm = () => {
//   addTeamData.value.expireTime = tempExpireTime.value
//   showPicker.value = false
// }

// 提交
const onSubmit = async () => {
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status)
  }
  const currentUser = await getCurrentUser();
  // todo 前端参数校验
  const res = await myAxios.post("/team/add",
      {
        name: postData.name,
        description: postData.description,
        expireTime: postData.expireTime,
        maxNum: postData.maxNum,
        userId: currentUser.userId,
        password: postData.password,
        status: postData.status,
      });
  if (res?.code === 0 && res.data){
    Toast.success('创建成功');
    await router.push({
      path: '/team',
      replace: true,
    });
  } else {
    const msg = res.description;
    Toast.fail('创建失败，'+ msg);
  }
}
</script>

<template>
  <div id="teamAddPage">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.name"
            name="name"
            label="队伍名"
            placeholder="请输入队伍名"
            :rules="[{ required: true, message: '请输入队伍名' }]"
        />
        <van-field
            v-model="addTeamData.description"
            rows="4"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="请输入队伍描述"
        />
        <van-field
            is-link
            readonly
            name="datetimePicker"
            label="过期时间"
            :placeholder="formattedExpireTime ?? '点击选择过期时间'"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
<!--          <van-date-picker-->
<!--              v-model="selectTime.expireTime"-->
<!--              type="datetime"-->
<!--              title="选择日期"-->
<!--              @confirm="showPicker = false"-->
<!--              :min-date="minDate"-->
<!--          />-->
          <van-datetime-picker
              v-model="addTeamData.expireTime"
              type="datetime"
              title="选择年月日"
              :min-date="minDate"
              @confirm="showPicker = false"

          />
        </van-popup>
        <van-field name="stepper" label="最大人数">
          <template #input>
            <van-stepper v-model="addTeamData.maxNum" max="10" min="3"/>
          </template>
        </van-field>
        <van-field name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="addTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="Number(addTeamData.status) === 2"
            v-model="addTeamData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入队伍密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>

</style>